<extend name="Public/base" />

<block name="body">
<style>
 .add_record div ul li{
    list-style: none;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: -50px;
 }
 .add_record div ul li span{
    line-height: 30px;
    width: 70px;
    /*text-align: right;  */
 }
 .add_record div ul li input{
    width: 250px;height: 30px;
    float: right;
    margin-left: 10px;
    border: solid 1px #ccc;
    border-radius: 3px; 
    padding-left: 5px;
    line-height: 26px;
 }
 .add_record div ul li select{
    width: 250px;height: 30px;
    float: right;
 }
 .add_record div ul li input:focus { 
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.gray {
    background-color: gray !important;
    border-color: gray !important;
    color: white !important;
}
.c_green {
    background-color: #5cb85c !important;
    border-color: #5cb85c !important;
    color: white !important;
}
.start {
    background-color: #1E90FF !important;
    border-color: #1E90FF !important;
    color: white !important;
}
    
.c_green:hover {
    background-color: #1da51d !important;
    border-color: #1da51d !important;
}
.table tbody td {
    vertical-align: middle !important;
}
._input {
    
}
._input input {
    
}
.search_name {
    border: solid 1px #ccc;
    padding: 4px 4px 4px 8px; 
    margin-right: 5px; 
    border-radius: 4px;
}
.btn-primary { 
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4; 
}
.btn-primary:hover {
    color: #fff; 
    background-color: #286090; 
    border-color: #204d74;
}
.btn-info { 
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da; 
}
.btn-info:hover {
    color: #fff; 
    background-color: #39b3d7; 
    border-color: #269abc;
}
.btn-warning { 
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236; 
}
.btn-warning:hover {
    color: #fff; 
    background-color: #ec971f; 
    border-color: #d58512;
}
.btn-danger { 
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a; 
}
.btn-danger:hover {
    color: #fff; 
    background-color: #c9302c; 
    border-color: #ac2925;
}
 </style>
<!-- 标题栏 -->
<div class="main-title">
    <h2>产品</h2>
</div>
<div class="data" style="display: none;">
<select id="data-nickname" name="li[username]">
<volist name="member" id="vo">
<option value='{$vo.nickname}'>{$vo.nickname}</option>
</volist>
</select>
</div>
<div class="dataname" style="display: none;">
<select id="data-name" name="li[name]">
<volist name="category" id="vo">
<option value='{$vo.name}'>{$vo.name}</option>
</volist> 
</select>
</div>
<div class="panel panel-default">
    <div class="panel-heading">     
        <div class="fl">
            <button   class="add_product btn btn-default c_green">新 增</button>  
            <button id="jq2excel" class="btn btn-info">导 出</button> 
            <div class="_input" style="float: right;">
                 <form action="{:U('index')}" method="post">
                    <input type="text" name="username" class="search_name" placeholder="搜索用户名"> 
                    <input  type="submit"  class="btn btn-warning search" value="查询">
                    <input  type="submit"  class="btn btn-primary search" value="返回"> 
                </form>
            </div>
            <a href="{:U('product_type')}">
                <button  class=" btn btn-default ">产品分类</button>
            </a>
        </div>      
    </div><!-- /.panel-heading --> 
    
    <div class="panel-body topa" > 
        <div class="table-responsive">      
            <table class="table table-striped table-bordered table-hover excel" id="dataTables-user"><!-- 必须设定表格的id == -->
                <thead>
                    <tr>       
                        <th class=""><input type="checkbox"  value="'value" > </th>
                        <th class="">产品编号</th>
                        <th class="">产品名称</th> 
                        <th class="">规格</th>
                        <th class="">产品分类</th> 
                        <th class="">状态</th> 
                        <th class="">备注</th> 
                        <th class="">创建时间</th> 
                        <th class="">操作</th>  
                    </tr>
                </thead>
                <tbody id="add-users"> 
                    <volist name="info" id="vo"> 
                        <tr> 
                        <th class=""><input type="checkbox"  value="'value" ></th>
                            <td>{$vo.number}</td> 
                            <td>{$vo.name}</td>  
                            <td>{$vo.specification}</td> 
                            <td>{$vo.category}</td> 
                            <if condition="$vo.status eq 0">
                                <td>禁用</td>
                            <elseif condition='$vo.status eq 1'/>
                                <td>已启用</td> 
                            </if> 
                            <td>{$vo.remark}</td> 
                            <td>{$vo.create_time}</td> 
                            <td class="txt_c noExl">
                                <a class="dis_b del_data" data-id="{$vo.id}"> 
                                    <if condition="$vo.status eq 0">
                                        <button  class="btn btn-default start processing ajax-get confirm" url="{:U('start',array('id'=>$vo['id']))}">启用</button>                                    
                                        <elseif condition='$vo.status eq 1'/>
                                        <button  class="btn btn-default gray processing ajax-get confirm" url="{:U('forbidden',array('id'=>$vo['id']))}">禁用</button> 
                                    </if>
                                    <button  class="add_finance btn btn-default c_green" url="{:U('compile',array('id'=>$vo['id']))}" >编辑</button>

                                    <button class="btn btn-danger ajax-get confirm" url="{:U('deletes',array('id'=>$vo['id']))}" target-form="ids">删除</button>

                                </a>
                            </td>     
                        </tr>
                    </volist>
                </tbody>
            </table>  
            
        </div><!-- /.table-responsive --> 

        <style>
            .topa{
                position: relative;
            }   
            .newly{
                width: 600px;
                height: 500px;
                position: absolute;
                top: 20%;
                left: 50%;
                margin-left: -300px;  
            }
            .add_record { text-align: center; }
            .add_record > div { display: inline-block; margin-top: 38px; }
            .add_record ul { margin: 0; }
            .add_record ul li {  }
            .add_record ul li span { float: left; }
            .add_record ul li input { float: left; }
        </style>        
        <!-- 用户新增隐藏 -->  
 
    </div><!-- /.panel-body -->
    <!-- 分页 -->
    <div class="page">
        {$_page}
    </div>
</div><!-- /.panel -->   
</block> 
<block name="script">
<link rel="stylesheet" href="__STATIC__/datetimepicker/css/datetimepicker.css" /> 
<script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
<script src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>   
<script type="text/javascript" src="__JS__/jquery.table2excel.min.js"></script> 
  

<script type="text/javascript">
$('#goback').on('click',function () {
    $('#addshow').hide();
}) 
$('.add_finance').on('click',function () {
    var dataId = $(this).parent().attr('data-id');
    // alert(dataId);
    $.ajax({
            type:"post",
            url:"__URL__/compile",
            data:{ID:dataId},
            success:function(data){ 
               $('#ids').val(data[0]['id']);
               $('#number').val(data[0]['number']);
               $('#name').val(data[0]['name']);
               $('#name').val(data[0]['name']);
               $('#specification').val(data[0]['specification']);
               $('#category').val(data[0]['category']);
               $('#remark').val(data[0]['remark']); 
            }
          });
    // var data = <?php echo $list;?>
    // console.log(datas);
})
//编辑产品
var _htm =  
    "<form id='_form' name='myform' method='post' role='form'>"+ 
        "<div class='add_record'>"+
            "<div>"+
                "<ul>"+  
                    "<li class='c_f'>"+
                        "<span>产品ID</span>"+
                        "<input type='text' id='ids' name = 'id' style = 'background:#ccc' readonly>"+
                    "</li>"+ 
                    "<li class='c_f'>"+
                        "<span>产品编号</span>"+
                        "<input type='text' id='number' name = 'number' readonly style = 'background:#ccc'>"+
                    "</li>"+
                    "<li class='c_f'>"+
                        "<span>产品名称</span>"+
                        "<input type='text' id='name' name='name' >"+
                    "</li>"+
                    "<li class='c_f'>"+
                        "<span>规格</span>"+
                        "<input type='text' id='specification' name = 'specification'>"+  
                    "</li>"+ 
                    
                    "<li class='c_f'>"+
                        "<span>产品分类</span>"+
                         "<input type='text' id='category' name='category'>"+
                    "</li>"+ 
                    "<li class='c_f'>"+
                        "<span>备注</span>"+
                         "<input type='text' id='remark' name='remark'>"+
                    "</li>"+     
                    "<p>"+
                        "<button class='btn btn-default c_green' id='submit' >确 定</button>"+ 
                    "</p>"+ 
                "</ul>"+
            "</div>"+
        "</div>"+ 
    "</form>";
    // 新增产品
 var _htms =  
    "<form id='_form' name='myform' method='post' role='form'>"+ 
        "<div class='add_record'>"+
            "<div>"+
                "<ul>"+   
                    "<li class='c_f'>"+
                        "<span>产品名称</span>"+
                        "<input type='text' id='name' name='name' >"+
                    "</li>"+
                    "<li class='c_f'>"+
                        "<span>规格</span>"+
                        "<input type='text' id='specification' name = 'specification'>"+  
                    "</li>"+ 
                    
                    "<li class='c_f'>"+
                        "<span>产品分类</span>"+
                         "<input type='text' id='category' name='category'>"+
                    "</li>"+ 
                    "<li class='c_f'>"+
                        "<span>备注</span>"+
                         "<input type='text' id='remark' name='remark'>"+
                    "</li>"+     
                    "<p>"+
                        "<button class='submit btn btn-default c_green'  >确 定</button>"+ 
                    "</p>"+ 
                "</ul>"+
            "</div>"+
        "</div>"+ 
    "</form>";
$('.add_product').click(function(){ 
    //新增记录层
    layer.open({  
      title: '新增产品', 
      type: 1,
      skin: 'layui-layer-rim', //加上边框
      area: ['500px', '700px'], //宽高
      content: _htms
    });
});    
$('.add_finance').click(function(){
    //编辑层
    layer.open({  
      title: '产品修改', 
      type: 1,
      skin: 'layui-layer-rim', //加上边框
      area: ['500px', '700px'], //宽高
      content: _htm
    });
});
var boole = true;
$(document).on('click','#submit',function(){
    $('.add_record ul li').each(function(){
        var input = $(this).find('input').val();  
        if(input == ''){
            boole = false;
            layer.msg('请填写完整内容!'); 
            return false;
        }else{
            boole = true;
        }
    });   
    if(boole){        
          var info = $('#_form').serialize();         
          $.ajax({
            type:"post",
            url:"__URL__/index",
            data:info,
            async:true,
            success:function(data){
                window.location.reload(); 
            }
          });
    }  
    return false;
});
$(document).on('click','.submit',function(){
    $('.add_record ul li').each(function(){
        var input = $(this).find('input').val();  
        if(input == ''){
            boole = false;
            layer.msg('请填写完整内容!'); 
            return false;
        }else{
            boole = true;
        }
    });   
    if(boole){        
          var info = $('#_form').serialize();         
          $.ajax({
            type:"post",
            url:"__URL__/product_add",
            data:info,
            async:true,
            success:function(data){
                window.location.reload(); 
            }
          });
    }  
    return false;
});
</script>
 
</block>
